<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .btn {
            border: none;
            /* 用于设置元素轮廓 */
            outline: none;
            background-color: #409eff;
            color: #fff;
            display: inline-block;
            /* 行高设置为 100% 同字体的大小而变化 */
            line-height: 1;
            /* 设置文本元素不换行 */
            white-space: nowrap;
            /* 用户浏览网页时鼠标样式 */
            cursor: pointer;
            text-align: center;
            transition: 0.1s;
            font-weight: 500;
            /* 文本不能被选中 */
            user-select: none;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
        }
        .btn:hover {
            background-color: #66b1ff;
        }
        .btn:active {
            background-color: #3a8ee6;
        }
        .btn:disabled {
            background-color: #66b1ff80;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
<div class="btn-container">
    <div id="btnLogin" class="btn">登录</div>
    <div id="btnReqProject" class="btn">请求受保护的接口</div>
    <div id="btnRefresh" class="btn">刷新token</div>
</div>
<script type="module" src="main.js"></script>
</body>
</html>